<template>
	<div>
		<!-- <p>文件数量：{{ props.viewList.length }}</p> -->
		<p>当前文件：{{ index + 1 }}/{{ props.viewList.length }}</p>
		<div class="row_part" v-if="props.viewList.length > 0">
			<div class="btn_part" @click="preBtn">
				<el-icon :size="20" :color="leftColor">
					<ArrowLeftBold />
				</el-icon>
			</div>
			<div class="conten_part">
				<viewItem :imgUrl="props.viewList[index]" :key="index"></viewItem>
			</div>
			<div class="btn_part" @click="nextBtn">
				<el-icon :size="20" :color="rightColor">
					<ArrowRightBold />
				</el-icon>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch, reactive, toRefs, onMounted } from 'vue'
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import viewItem from './index.vue'

let props = defineProps({
	viewList: {
		type: Array,
		default: () => [],
	},
	type: {
		type: String,
		default: 'pdf',
	},
})
let leftColor = ref('black')
let rightColor = ref('black')
let index = ref(0)
if(props.viewList.length==1){
	leftColor.value = 'grey'
	rightColor.value = 'grey'
}
const preBtn = () =>{
	if(leftColor.value == 'black'){
		if(index.value != 0){
			index.value--
		}else{
			index.value=props.viewList.length - 1
		}
	}
}
const nextBtn = () =>{
	if(rightColor.value == 'black'){
		if(index.value != props.viewList.length - 1){
			index.value++ 
		}else{
			index.value=0
		}
	}
}
// watch(
// 	() => index.value,
// 	(val) => {
// 		if (val == 0) {
// 			leftColor.value = 'grey'
// 		} else if (val > 0) {
// 			leftColor.value = 'balck'
// 		}
// 		if (val == props.viewList.length - 1) {
// 			rightColor.value = 'grey'
// 		} else {
// 			rightColor.value = 'balck'
// 		}
// 	}
// )

</script>
<style scoped lang="scss">
.row_part {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.btn_part {
	height: 50px;
	width: 50px;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.conten_part {
	width: 80%;
}
</style>
